
{% extends "admin/dashboard.html" %}

{% block content %}
<div class="card">
    <h2 class="text-xl font-bold mb-4">用户管理</h2>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="table-header">ID</th>
                <th scope="col" class="table-header">用户名</th>
                <th scope="col" class="table-header">操作</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200" id="user-list">
            <!-- 这里将通过 JavaScript 动态填充用户数据 -->
        </tbody>
    </table>
</div>

<!-- 编辑用户模态框 -->
<div id="edit-user-modal" class="fixed inset-0 z-10 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
                    <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">编辑用户</h3>
                    <div class="mt-2">
                        <form id="edit-user-form">
                            <input type="hidden" id="edit-user-id">
                            <div class="mb-4">
                                <label for="edit-username" class="block text-sm font-medium text-gray-700">用户名</label>
                                <input type="text" id="edit-username" class="mt-1 p-2 w-full border rounded-md">
                            </div>
                            <div class="mt-5 sm:mt-6">
                                <button type="button" onclick="submitEditUser()" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/80 sm:text-sm">
                                    保存更改
                                </button>
                                <button type="button" onclick="closeEditModal()" class="mt-3 inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                    取消
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 修改请求地址
        fetch('/admin/users/list')
            .then(response => response.json())
            .then(data => {
                const userList = document.getElementById('user-list');
                data.forEach(user => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="table-data">${user.id}</td>
                        <td class="table-data">${user.username}</td>
                        <td class="table-data">
                            <a href="#" class="text-primary hover:text-primary/80" onclick="editUser(${user.id})">编辑</a>
                            <a href="#" class="text-red-500 hover:text-red-700 ml-2" onclick="deleteUser(${user.id})">删除</a>
                        </td>
                    `;
                    userList.appendChild(row);
                });
            })
            .catch(error => console.error('获取用户列表失败:', error));
    });

    // 编辑用户函数
    function editUser(id) {
        fetch(`/admin/users/${id}`)
            .then(response => response.json())
            .then(user => {
                document.getElementById('edit-user-id').value = user.id;
                document.getElementById('edit-username').value = user.username;
                document.getElementById('edit-user-modal').classList.remove('hidden');
            })
            .catch(error => console.error('获取用户信息失败:', error));
    }

    // 提交编辑用户信息
    function submitEditUser() {
        const userId = document.getElementById('edit-user-id').value;
        const username = document.getElementById('edit-username').value;

        fetch(`/admin/users/${userId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: username
            }),
        })
        .then(response => {
            if (response.ok) {
                alert('用户信息更新成功');
                closeEditModal();
                location.reload(); // 刷新页面
            } else {
                alert('用户信息更新失败');
            }
        })
        .catch(error => console.error('更新用户信息失败:', error));
    }

    // 关闭编辑模态框
    function closeEditModal() {
        document.getElementById('edit-user-modal').classList.add('hidden');
    }

    // 删除用户函数
    function deleteUser(id) {
        if (confirm('确定要删除这个用户吗？')) {
            fetch(`/admin/users/${id}`, {
                method: 'DELETE',
            })
            .then(response => {
                if (response.ok) {
                    alert('用户删除成功');
                    location.reload(); // 刷新页面
                } else {
                    alert('用户删除失败');
                }
            })
            .catch(error => console.error('删除用户失败:', error));
        }
    }
</script>
{% endblock %}